{% extends "base.html" %}

{%block title%}Parzystość liczb{%endblock%}

{%block head%}
    <link rel="stylesheet" type="text/css" href="{{MEDIA_URL}}/css/jquery.jqplot.min.css" />
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
    <script src="{{MEDIA_URL}}/js/jquery-ui.datepicker-pl.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function() {
            $("#id_date").datepicker($.datepicker.regional['pl']);
        });
    </script>
       
    <script type="text/javascript" src="{{MEDIA_URL}}/js/jquery.jqplot.min.js"></script>
    <script type="text/javascript" src="{{MEDIA_URL}}/js/plugins/jqplot.pieRenderer.min.js"></script>

    <script type="text/javascript" language="javascript">
$(document).ready(function(){
     $.jqplot.config.enablePlugins = true;

    var data = [['Parzyste liczby', {{value.0}}], ['Nieparzyste liczby', {{value.1}}]];
    var plot = $.jqplot ('chart', [data],
    {
        seriesDefaults: {
            renderer: $.jqplot.PieRenderer,
            shadow:false,
            rendererOptions: { showDataLabels: true }
        },
        legend: { show:true, location:'e', showLabels:true, showSwatch:false }
    });
});
    </script>
    <style>
    #chart table.jqplot-table-legend {
        width:auto;
    }
    </style>
{%endblock%}

{% block content %}
	<div id="content">
		<div class="post">
			<div class="title">
				<h2>Parzystość liczb</h2>
			</div>
			<div class="entry">
			    <form method="POST" action="{%url parity%}">
			    {% csrf_token %}
			        {{form.mode}} <span class="m-l">Od daty:</span> {{form.date}}
	                <input type="submit" id="pick" class="m-l" />
            	</form>
                <div id="chart" style="height:310px; width:610px;"></div>
			</div>
		</div>
	</div>
{% endblock %}
